<!--  -->
<template>
  <div class="goods_list">
    <!-- 头部 -->
    <NavBar class="home_navbar">
      <div @click="goBack" slot="left">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <div slot="center">商品列表</div>
    </NavBar>

    <!-- 搜索框 -->
    <Search class="home_searh">
      <div slot="center">
        <van-field center @input='handleSearch' input-align='center'  placeholder="搜索" />
      </div>
    </Search>
    <div
      @click="toDetail(item.goods_id)"
      v-for="(item, index) in goods"
      :key="index"
      class="goods_item"
    >
      <div class="goods_img">
        <img
          :src="
            item.goods_small_logo
              ? item.goods_small_logo
              : 'http://image5.suning.cn/uimg/b2c/newcatentries/0070175200-000000000763892698_2_400x400.jpg'
          "
          alt=""
        />
      </div>
      <div class="goods_info">
        <div class="goods_name">{{ item.goods_name }}</div>
        <div class="price">￥{{ item.goods_price }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/navBar/NavBar.vue";
import Search from "@/components/common/search/Search.vue";
import { getGoodsList ,getGoodsSearch } from "@/util/category";
export default {
  name: "GoodsList",
  components: {
    NavBar,
    Search,
  },
  data() {
    return {
      currentId: this.$route.params.id || "",
      goods: [],
    };
  },
  created() {
    // console.log(this.currentId);
    this.getGoodsList(this.currentId);
  },
  watch: {
    $route(to) {
      // console.log(to);
      if (to.params.id ) {
        this.getGoodsList(to.params.id);
      }
    },
  },
  methods: {
    async getGoodsList(id) {
      let { data } = await getGoodsList(id);
      this.goods = data.message.goods;
    },
    goBack() {
      this.$router.go(-1);
    },
    toDetail(cid) {
      this.$router.push('/gooddetail/'+cid)
    },
    async handleSearch(string){
      if(!string.trim()){
        return;
      }

      let {data:{message}} = await getGoodsSearch(string)
      return message


    }
  },
};
</script>

<style scoped lang='less'>
.goods_list {
  position: relative;
  z-index: 555;
  background-color: #fff;
}
.home_navbar {
  background-color: #eb4450;
  color: #fff;
  font-weight: 600;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
}
.home_searh {
  margin-top: 44px;
  background-color: #eb4450;
  display: flex;
  align-items: center;
  .van-field  {
    margin: 0 auto;
    height: 30px;
    width: 95%;
    border-radius: 10px;
  }
}
.goods_item {
  display: flex;
  border-bottom: 1px solid #eee;
  .goods_img {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 70%;
    }
  }
  .goods_info {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .goods_name {
      font-size: 13px;
    }
    .price {
      font-size: 18px;
      color: red;
    }
  }
}
</style>